<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>

	<f:view>
		<ui:composition template="WEB-INF/templates/template.xhtml">
			
			
 
		    
		    <ui:define name="content">
		    <ui:param name="id" value="#{param.id}" />
		    <ui:param name="addressId" value="#{eventBean.showEventInfos(id).getFkAddressId()}" />
		    <ui:param name="typeId" value="#{eventBean.showEventInfos(id).getFkEventtypeId()}" />
		    <ui:param name="customer" value="#{loginBean.customer}"></ui:param>
		     <ui:param name="username" value="#{loginBean.username}"></ui:param>
		    <ui:param name="eventname" value="#{eventBean.showEventInfos(id).getName()}"></ui:param>
		    
		    
  <div class="row">
  <h1><h:outputText value="#{eventBean.showEventInfosWithDummy(id).getName()}"/></h1>

    <div class="four columns">
      <img src="#{eventBean.showEventInfos(id).getFlyer()}" />
    </div>

    <div class="six columns">
    	<div class="row">
    		<p class="four columns">Ort:</p>
    		<!-- Name sollte angegeben sein!! -->
    		<p class="eight columns"><h:outputText value="#{addressBean.showAddressInfos(addressId).getName()}"/><br/>
    		<h:outputText value="#{addressBean.showAddressInfos(addressId).getStreet()}"/><br/>
    		<h:outputText value="#{addressBean.showAddressInfos(addressId).getZip()}	"/> 
    		<h:outputText value="#{addressBean.showAddressInfos(addressId).getCity()}"/><br/>
    		<h:outputText value="#{addressBean.showAddressInfos(addressId).getCountry()}"/></p>
    </div>
    	
    		
    	<div class="row">
    		<p class="four columns">Eventtype:</p>
    		<p class="eight columns"><h:outputText value="#{typeBean.showEventtypeInfos(typeId).getText()}"/></p>
       	</div>
    		
    	<div class="row">
    		<p class="four columns">Datum:</p>
    		<p class="eight columns"><h:outputText value="#{eventBean.showEventInfos(id).getDateTimeDateOnly()}"/></p>
       	</div>
       	
       	<div class="row">
    		<p class="four columns">Einlasszeit:</p>
    		<p class="eight columns"><h:outputText value="#{eventBean.showEventInfos(id).getDateTimeHoursOnly()}"/></p>
       	</div>
       	
       	<div class="row">
    		<p class="four columns">Preis pro Ticket:</p>
    		<p class="eight columns"><h:outputText value="#{eventBean.showEventInfosWithDummy(id).getTicketPrice()}"/>&#8364;</p>
       	</div>
    	
    	<div class="row">
    		<h3 class="four columns">Details</h3>
			<p class="twelfe columns right">
				<h:outputText value="#{eventBean.showEventInfos(id).getDescription()}"/>
			</p>
    	
    	</div>
    	
    		
    	<div class="row">
    		<div class="four columns">
    		<label> Anzahl:    		
				 <h:form>
		            <h:selectOneMenu value="#{cartBean.ticketQuantity}" valueChangeListener="#{cartBean.valueChangeMethod}">
		               <f:selectItems value="#{cartBean.quantities}"/>		             
		               <f:ajax execute="@this" render="@this" event="change" />                                    
		            </h:selectOneMenu>
		           </h:form>
			</label> </div>
   		<div class="eight columns"> 
           </div>	   
   		<c:if test="#{id != null}">
	   		<div class="eight columns"> 
		   		<h:form>
		   			<h:commandButton value="in den Warenkorb legen" action="#{cartBean.addToCart(id)}"><f:param name="id" value="#{param.id}" /></h:commandButton>	
		        </h:form>
		    </div>
		   	<h:form target="_blank">
		   		<h:inputHidden value="#{sharingBean.setUsername(customer.userName)}"></h:inputHidden>
		   		<h:inputHidden value="#{sharingBean.setUserLastname(customer.lastName)}"></h:inputHidden>
		   		<h:inputHidden value="#{sharingBean.setUsergender(customer.male)}"></h:inputHidden>
		   		<h:inputHidden value="#{sharingBean.setCustomer(customer)}"></h:inputHidden>
		    	<h:inputHidden value="#{sharingBean.setEventname(eventname)}"></h:inputHidden>
		    	<h:inputHidden value="#{sharingBean.setEventid(id)}"></h:inputHidden>
		    	<h:inputHidden value="#{sharingBean.setEventdate(eventBean.showEventInfos(id).getDateTimeDateOnly())}"></h:inputHidden>
		    	<div class="eight columns"><h:commandButton value="Weiterempfehlen" this.form.target="_blank" onclick="window.open('./share.xhtml', 'WindowName', 'dependent=yes, menubar=yes, toolbar=no, scrollbars=yes' ); return false;" />
		    	</div>		
		    </h:form>
		    </c:if>
    	</div>
    	
    	<!-- anstatt der beispiel url mit id=1
    		 ist nun die dummy-page https://www.facebook.com/ticketer eingetragen -->
    	<c:if test="#{id != null}">	 
	    	<div id="fb_iframe">
	    		<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/ticketer&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=recommend&amp;font=verdana&amp;colorscheme=light&amp;height=25"
	 				scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:25px;"></iframe>
	    	</div>
	 	</c:if>
    	
    </div>
    
    <div class="two columns">&nbsp;</div>



  </div>

<hr />
  <!-- FEHLER -->

      <c:if test="#{cartBean.getticketamountisFaild() == true}">
      	<div style="margin:0 5px 0 10px"></div>
		  <div class="row">
		    <div class="twelve columns">
		
		      <div class="panel">
		        <h4>Fehler: Pro Event sind maximal 6 Tickets erlaubt!</h4>		
		      </div>
		
		    </div>
		  </div>
      </c:if>


  <!-- EVENTS -->

<!--  

<div class="row">
<h2 style="text-align:center;padding-bottom:10px;">Ähnliche Events</h2>
</div>
  <div class="row eventslist">
    <div class="four columns">
      <div class="three columns">
        <a href="event.xhtml"><img src="img/dummy/event1.jpg" /></a>
      </div>
      <div class="nine columns">
        <h4><a href="event.xhtml">Party Hard!</a></h4>
        <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. </p>
      </div>
      

    </div>

    <div class="four columns">
      <div class="three columns">
        <a href="event.xhtml"><img src="img/dummy/event1.jpg" /></a>
      </div>
      <div class="nine columns">
        <h4><a href="event.xhtml">Party Hard!</a></h4>
        <p>Bacon ipsum dolor  duis velit. </p>
      </div>
    </div>

    <div class="four columns">
      <div class="three columns">
        <a href="event.xhtml"><img src="img/dummy/event1.jpg" /></a>
      </div>
      <div class="nine columns">
        <h4><a href="event.xhtml">Party Hard!</a></h4>
        <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. </p>
      </div>
      
    </div>
    
  </div>



 -->

  <!-- Call to Action Panel -->
  <!--
  -->
		    
		    </ui:define>
		    
		    
		    
		    
		    
		    
		    
		    <!-- Um das Menü im Footer zu ändern -->
		    <!-- <ui:define name="footer">
		    	blah
		    </ui:define>-->
		    
		    
		    
		    <!--  Für JS-Scripts die für eine Seite benötigt werden -->
		    <ui:define name="scripts">
		    <script type="text/javascript">
		    $(window).load(function() {
            	$('#slider').orbit();
        	});
		    </script>
		    </ui:define>
    
	    </ui:composition>
	</f:view>

</h:body>
</html>
